Breakpoints

A breakpoint is a range of a set screen sizes that will adjust to suit the screen size or orientation of the user’s device.

There are 7 unique breakpoints that cover mobile all the way up to large desktop devices.

As standard, 20px padding should be used for all breakpoints above 480px, and 10px padding below 480px, especially on mobile. This will be broken down on the next page.

• 320px - 479px

• 480px - 767px

• 768px - 1023px

• 1024px - 1279px

• 1280px - 1439px

• 1440px - 1919px

• 1920px+